<template>
	<view>
		<view class="presentation">
			<text class="subtitle">Toast</text>
			<text class="describe">包括顶部提示，居中提示，底部提示。可切换提示框背景颜色。</text>
		</view>
		<view class="text_position">
			<text :class="{active : index == textIndex}" 
				  @click="changText(index)" 
				  v-for="(item,index) in textList"
				  :key="index">
				{{item.name}}
			</text>
		</view>
		<button class="btn_grey" 
		        type="default" 
				v-for="(item,index) in btnTextList" 
				@click="changeToast(item,index)"
				:key="index">
			{{item}}
		</button>
		<toast ref="toast" 
		:position="textList[textIndex].code" 
		:backgroundColor="toastBgColor">
		</toast>
	</view>
</template>
<script>
	import toast from '../../components/ker-toast/ker-toast.vue'
	export default {
		components: {
			toast
		},
		data() {
			return {
				textList: [
					{
						name:'顶部提示',
						code:'top'
					},
					{
						name:'居中提示',
						code:'center'
					},
					{
						name:'底部提示',
						code:'bottom'
					},
				],
				textIndex: 0,
				textContent: '一般提示',
				btnTextList: [
					'一般提示',
					'成功提示',
					'警告提示',
					'错误提示',
					'长文字消息提示',
					'自定义时间消息提示',
				],
				toastBgColor:null
			}
		},
		methods: {
			changText(index) {
				this.textIndex = index
			},
			changeToast(text,index) {
				let options = {
					msg:text
				}
				this.toastBgColor = 'rgba(0,0,0,.55)'
				switch (index){
					case 1:
						this.toastBgColor = 'rgba(98,184,1,1)'
						break
					case 2 :
						this.toastBgColor = 'rgba(243,155,5,1)'
						break
					case 3:
						this.toastBgColor = 'rgba(233,3,30,1)'
						break
					case 4:
						options = {
							msg : '长文字消息提示，看不完消息？可以自定义设置显示时间，建议提示信息不要过长'
						}
						break; 
					case 5:
						options = {
							msg : '4S后关闭提示框',
							duration : 4000
						}
						break;
				}
				this.$refs.toast.showTips(options)
			}
		},
		mounted() {}
	}
</script>
<style lang='scss' scoped>
	.presentation{
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20px 40px;
		.subtitle{
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
		.describe{
			font-size: 14px;
			color: #999;
		}
	}
	.text_position {
		width: 300px;
		margin: 0 auto;
		border: 1px solid #4aa0ff;
		display: flex;
		justify-content: space-around;
		border-radius: 8px;
		overflow: hidden;
		margin-top: 22px;
		text {
			color: #4aa0ff;
			line-height: 100%;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			flex: 1;
			text-align: center;
			&.active {
				background-color: #4aa0ff;
				color: #FFFFFF;
			}
		}
	}

	.btn_grey {
		border-radius: 20px;
		font-size: 16px;
		color: #989898;
		margin: 20px 20px 0 20px;
		background-color: #eaeaea;

		&::after {
			border: none;
		}
	}
</style>
